<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])
const maxValue = parseInt(props.data.max)
const minValue = parseInt(props.data.min)

// const doData = (data:any) => {
//   // 创建包含12个月的空数组
//   const result = Array(10).fill('');
//
//   // 填充实际数据
//   data.forEach((item,index) => {
//     result[index] = item
//   });
//
//   return result;
// }

const colors = ['#0FC6C2','#1AFA29','#D81E06','#BFBFBF']

const options = ref({
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '18%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    show: true,
    icon: 'circle',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 97,
    textStyle: {
      color: '#ebeef5',
      fontSize: 24
    },
    data: []
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      boundaryGap: true,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#ebeef5',
        fontSize: 24,
        interval: 0,
        margin: 10
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false // 隐藏Y轴
    },
  ],
  dataZoom: [{
    type: 'inside',
    filterMode: 'none'  // 不过滤极值点
  }],
  series: [
    {
      name: '',
      type: 'bar',
      itemStyle: {
        color: function(params) {
          // params.dataIndex 是当前柱形的索引（从0开始）
          // 循环使用colors数组中的颜色
          return colors[params.dataIndex % colors.length];
        }
      },
      smooth: true,
      symbol: 'true',
      showSymbol: false,
      barWidth: 40,
      barGap: '0%', // 柱间无间隙
      barCategoryGap: '5px',
      label: {
        show: true, // 必须开启：显示数值
        position: 'top', // 位置：柱形顶部
        // 其他样式配置（可选）
        color: '#fff', // 数值颜色
        fontSize: 24, // 字号
        fontWeight: 'bold', // 字重
        formatter: '{c}', // 数值格式（{c} 表示数据值）
        distance: 0 // 与柱形顶部的距离（避免紧贴）
      },
      //   yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      data: []
    }
  ]
})

watch(
    () => props.data,
    (val) => {
      const {legendList, timeList, targetList, actualList,max,min } = val
      options.value.xAxis[0].data = timeList
      options.value.series[0].data = actualList
      // options.value.series[0].markLine.data[0].yAxis = min
      // options.value.series[0].markLine.data[1].yAxis = max
      // options.value.yAxis[0].min = 0
      // options.value.yAxis[0].max = max + 1
      if(actualList.length == 1 && actualList[0] == 0) {
        options.value.yAxis[0].min = 0;
        options.value.yAxis[0].max = 5;
        options.value.yAxis[0].interval = 1;
      }
    },
    {
      deep: true, // 开启深度监听
      immediate: true // 立即触发一次（可选）
    }
)
</script>
<template>
  <MyChart height="135px" :option="options" />
</template>
